/*
 *  视频组件
 *  基本适配pc端 绝大多数手机端微信端
 *  Hovace.
 * /
 *
/*
 *  pc端判断
 */
function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"
    ];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

/*
 * 随机数
 * */
function _charecter() {
    var character = String.fromCharCode(Math.floor(Math.random() * 26) + "A".charCodeAt(0));
    return character;
}

/*
 *  补0
 */
function addzero(num) {
    if (num < 10) {
        return ("0" + num);
    } else {
        return num;
    }
}

/*
 *  视频事件监听事件
 *
 * 	@eventName 视频事件名称
 *  @m	视频对象
 * 	@fun 回调函数
 *
 */
var eventTester = function (eventName, m, fun) {
    if (window.addEventListener) {
        m.addEventListener(eventName, function () {
            if (fun) {
                fun(this);
            }
            //console.log((new Date()).getTime(),eventName);
        }, false);
    } else {
        m.attachEvent('on' + eventName, function () {
            if (fun) {
                fun(this);
            }
            // console.log((new Date()).getTime(),eventName);
        });
    }
}
/*
 *  视频播放
 *
 */


//视频播放
function videoPlay(data_src) {
    if ($(".video-box").length > 0) {
        $(".video-close").click();
    }
    document.ondragstart = function () {
        return false;
    };
    window.onresize = function () {
        iteme = setTimeout(function () {
            if (!checkFull()) {
                //要执行的动作
                $("body").removeClass("noscroll");
                $(".video-box").removeClass("quanping");
                $(".video-fullscreen").find("i").removeClass("i-suoxiao").addClass("i-quanping");
            } else {
                $("body").addClass("noscroll");
                $(".video-box").addClass("quanping");
                $(".video-fullscreen").find("i").removeClass("i-quanping").addClass("i-suoxiao");
            }
        }, 0)
    }

    function checkFull() {
        var explorer = window.navigator.userAgent.toLowerCase();
        console.log(window.screen.width, window.outerWidth, window.screen.height, window.outerHeight)
        if (explorer.indexOf('chrome') > 0) { //chrome
            if ((window.screen.width - window.outerWidth <= 17) && (window.screen.height - window.outerHeight <= 17)) {
                return true;
            } else {
                return false;
            }
        } else { //IE 9+  fireFox
            if (window.outerWidth == screen.width) {
                return true;
            } else {
                return false;
            }
        }
    }

    function quanpin(elem) {
        if (IsPC()) {
            var elem = document.documentElement;
        } else {
            if (elem.paused && elem.networkState <= elem.HAVE_METADATA) {
                elem.play();
                setTimeout(function () {
                    elem.pause();
                    elem.webkitEnterFullScreen();
                    return;
                }, 0);
            } else {
                elem.webkitEnterFullScreen();
                return;
            }
        }
        if (elem.requestFullscreen) {
            //"W3C";
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            //FireFox
            elem.mozRequestFullScreen();

        } else if (elem.webkitRequestFullScreen) {
            //Chrome等
            elem.webkitRequestFullScreen();

        } else if (elem.msRequestFullscreen) {
            //IE11
            console.log(11);
            elem.msRequestFullscreen();
        }
    }

    function exitquanping() {
        if (document.exitFullscreen) {

            document.exitFullscreen();

        } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen();

        } else if (document.webkitCancelFullScreen) {

            document.webkitCancelFullScreen();

        } else if (document.msExitFullscreen) {

            document.msExitFullscreen();

        }
    }

    var menuarr;
    var menustr = "";
    if ($(this).attr("data-menu")) {
        menuarr = $(this).attr("data-menu").split(" ");
        $(menuarr).each(function (k) {
            menustr += "<li class='video-menu-item video-menu-item-" + k + " " + (k == 0 ? "video-active" : "") + "'  >" + this + "</li>";
        })
    }

    var datasrc = data_src, src = '';
    var dangqian = "";
    if (src.indexOf("mp4") < 0 && $(this).attr("data-menu")) {
        dangqian = menuarr[0];
        src = datasrc + dangqian + ".mp4";
    } else {
        src = datasrc;
    }
    if (!src) {
        alert("未添加视频链接");
    }
    console.log(src);
    var menu = ["<div class='video-definition video-tooltip '>",
        "<button class='video-button video-tooltip-toggle video-definition-button'>",
        "<span>" + dangqian + "</span>",
        "</button>",
        "<div class='video-tooltip-content'>",
        "<ul class='video-menu'>",
        menustr,
        "</ul>",
        "</div>",
        "</div>"];
    if (!$(this).attr("data-menu")) {
        menu = []
    }
    var vClass = $(this).attr("data-heibian") ? "heibian" : "";
    var videoid = "my" + _charecter() + _charecter();
    var iteme = null;
    var str = ["<div class='video-box " + vClass + "' id='" + videoid + "box'>",
        "<div class='video-bg'></div>",
        "<div class='video-loading-pulse'></div>",
        "<div class='video-close'></div>",
        "<div class='video-container f-czspjuzhong'>",
        "<div class='video-div'>",
        "<div class='video-video'>",
        "<video preload='auto' x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-orientation='portraint' id=" + videoid + "  x-webkit-airplay='' playsinline='' webkit-playsinline='' ",
        "src='" + src + "'",
        ">",
        "</video>",
        "</div>",
        "<div class='video-bofang f-czspjuzhong '> <i class='i i-bofang '></i></div>",
        "<div class='video-loading yihuanchun f-czspjuzhong'> <i class='i i-loading '></i></div>",
        "<div class='video-ui'>",
        "<div class='video-progress'>",
        "<div class='video-tooltip video-tinytip video-tooltip-time'>",
        "<button class='video-tooltip-toggle'>",
        "<span class='video-tooltip-value'></span>",
        "</button>",
        "<div class='video-tooltip-content'>",
        "<div class='video-tinytip-content'>",
        "<span class='video-text'></span>",
        "</div>",
        "</div>",
        "</div>",
        "<div class='video-progress-padding'></div>",
        "<div class='video-progress-list'>",
        "<div class='video-progress-buffer'></div>",
        "<div class='video-progress-hover'></div>",
        "<div class='video-progress-play'><span class='video-progress-handle'></span></div>",
        "</div>",
        "</div>",
        "<div class='video-controls-buttons'>",
        "<button class='video-bofang video-button'> <i class='i i-bofang f-czspjuzhong'></i></button>",
        "<span class='video-time-panel'>",
        "<span class='video-time-panel-current'>00:00</span>",
        "<span class='video-time-panel-split'>&nbsp&nbsp/&nbsp&nbsp</span>",
        "<span class='video-time-panel-total'>00:00</span>",
        "</span>",
        "<div class='video-fullscreen'>",
        "<button class='video-button video-tooltip-toggle video-fullscreen-default' type='button'>",
        "<i class='i i-quanping f-czspjuzhong'></i>",
        "</button>",
        "</div>",
        menu.join(""),
        "<div class='video-volume video-popup'>",
        "<button class='video-button video-btn-volume' data-state='volume'>",
        "<i class='i i-voice-on f-czspjuzhong'></i>",
        "</button>",
        "<div class='video-volume-slider video-popup-content'>",
        "<div class='video-volume-range'>",
        "<div class='video-volume-range-current' style='height: 50%;'>",
        "<div class='video-volume-handle'></div>",
        "</div>",
        "</div>",
        "<div class='video-tinytip-tiao'></div>",
        "</div>",
        "</div>",
        "</div>",
        "</div>",
        "</div>",
        "</div>",
        "</div>"
    ]
    $("body").append(str.join(""));
    var meido = document.getElementById(videoid);
    meido.volume = .5;
    var videobox = $("#" + videoid + "box");

    var ua = window.navigator.userAgent.toLowerCase();

    function isWeiXin() {

        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            return true;
        } else {
            return false;
        }
    }


    vid = document.getElementsByTagName('video')[0]
    // if (isWeiXin()) {
    //     if (/android/.test(ua)) {
    //         video.play();
    //         $('video-box').hide()
    //
    //     }
    //     video.play();
    // }

    /*视频缓存成功可以获取长度和播放*/
    eventTester("waiting", meido, function () {
        console.log(" 等待数据，并非错误");
        $(".video-loading").removeClass("yihuanchun");
    });
    eventTester("playing", meido, function () {
        console.log("播放了");
        videobox.addClass("video-playing").removeClass("video-pause");
        $(".video-loading").addClass("yihuanchun");
    });
    eventTester("stalled", meido, function () {
        console.log("/网速失速");
    });
    eventTester("ended", meido, function () {
        //console.log("播放结束");
//			$(".video-close").click();
    });
    eventTester("canplay", meido, function () {
        //console.log("可以播放");
        $(".video-container", videobox).addClass("video-ready");
        meido.canplay = true;
        meido.play();
        $(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting").css("transition", "none");
    });
    eventTester("loadedmetadata", meido, function () {
        //console.log("成功获取时长")
        $(".video-time-panel-total").html(addzero(parseInt(meido.duration / 60)) + ":" + addzero(parseInt(meido.duration % 60)));
    });
    eventTester("suspend", meido, function () {
//			$(".video-loading").removeClass("yihuanchun");
        console.log("延迟下载")
    })
    eventTester("loadstart", meido, function () {
        console.log("客户端开始请求数据")
        $(".video-loading").removeClass("yihuanchun");
    })
    eventTester("progress", meido, function () {
        $(".video-container", videobox).addClass("video-ready");
        console.log("客户端正在请求数据")
    })
    /*进度相关*/
    eventTester("timeupdate", meido, function () {
        //console.log("播放时间改变");
        if (meido.canplay) {
            var currentTime = meido.currentTime;
            var buffered = meido.buffered.end(0);
            var duration = meido.duration;
            for (var i = 0; i < meido.buffered.length; i++) {
                if (currentTime < meido.buffered.end(i)) {
                    buffered = meido.buffered.end(i);
                    break;
                }
            }
            var buff_pro = parseInt((buffered / duration) * 100);
            $(".video-time-panel-current").html(addzero(parseInt(currentTime / 60)) + ":" + addzero(parseInt(currentTime % 60)));
            $(".video-progress-play").css("width", currentTime / duration * 100 + "%");
            $(".video-progress-buffer").css("width", buff_pro + "%");
        }
    });
    var mx = 0;
    $(document).on("mousemove", function (e) {
        mx = e.screenX;
    })
    eventTester("play", meido, function (e) {
        videobox.addClass("video-playing").removeClass("video-pause");
        $(".video-bofang.f-czspjuzhong").addClass("video-hide");
        //var ny=e.cy
        var px = mx;
        clearTimeout(iteme);
        iteme = setTimeout(function () {
            if (px == mx) {
                $(".video-div").addClass("video-hide-ui");
            }
        }, 5000);
    });
    eventTester("pause", meido, function () {
        //视频停止让box隐藏
        videobox.hide();
        videobox.addClass("video-pause").removeClass("video-playing");
        $(".video-bofang.f-czspjuzhong").removeClass("video-hide");
    });
    eventTester("ended", meido, function () {
        videobox.removeClass("video-pause video-playing");
        $(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang");
//			$(".video-bofang.f-czspjuzhong").removeClass("video-hide");
    });
    /*
     * 播放暂停切换
     *
     * */
    $(".video-bofang,.video-video").on("click", function (e) {
        if (IsPC() || e.currentTarget.classList[0] == "video-bofang" || e.target.classList[0] == "video-bofang") {
            clearTimeout(iteme);
            iteme = setTimeout(function () {
                //do function在此处写单击事件要执行的代码
                if ($(".video-bofang").find("i").hasClass("i-bofang")) {
                    meido.play();
                    $(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting");
                } else {
                    meido.pause();
                    $(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang");
                }
            }, 100);
        } else {
            if (videobox.hasClass("hideui")) {
                videobox.removeClass("hideui");
            } else {
                videobox.addClass("hideui");
            }
        }
    });
    /*
     * 双击全屏
     *
     * */
    $(".video-video").on("dblclick", function () {
        if (IsPC()) {
            clearTimeout(iteme);
            if (videobox.hasClass("quanping")) {
                exitquanping();
            } else {
                quanpin();
            }
        }
    });
    /*
     *
     *  鼠标移入隐藏UI
     *
     * */
    $(".video-ui").on("mouseleave", function () {
        clearTimeout(iteme);
        iteme = setTimeout(function () {
            //do function在此处写单击事件要执行的代码
            $(".video-div").addClass("video-hide-ui");
        }, 5000);

    });
    $(".video-ui").on("mouseenter", function () {
        $(".video-div").removeClass("video-hide-ui");
    });
    /*
     *
     *  关闭video
     *
     * */
    $(".video-close").on("click touchstart", function () {
        videobox.remove();
    });
    //进度条面板相对浏览器的左边的距离
    var parent_left = 0;
    //鼠标位置相对浏览器的左边的距离
    var e_left = 0;
    /*
     *  进度条
     */
    $(".video-progress", videobox).on("mousemove touchmove", function (e) {
        var event;
        if (e.offsetX) {
            event = e;
        } else if (e.originalEvent.changedTouches[0].clientX) {
            event = e.originalEvent.changedTouches[0];
        }
        parent_left = $(this).offset().left;
        //鼠标位置相对浏览器的左边的距离
        e_left = event.pageX;
        var width = e_left - parent_left;
        var wb = (width / $(this).width());
        var tt = wb * meido.duration;
        $(".video-tooltip", $(this)).css({
            "left": (wb * 100) + "%"
        });
        $(".video-progress-hover", videobox).css({
            "width": (wb * 100) + "%"
        });
        $(".video-text", videobox).html(addzero(parseInt(tt / 60)) + ":" + addzero(parseInt(tt % 60)));
    });
    $(".video-progress", videobox).on("click touchstart touchend", function (e) {
        videobox.removeClass("video-playing");
        var percent = ($(".video-progress-hover", videobox).width() / $(this).width());
        console.log(percent);
        meido.currentTime = (percent * meido.duration);
    });
    /*
     *  音量
     */
    var canMove = false;
    $(".video-tinytip-tiao", videobox).on("mousedown", function (e) {
        canMove = true;
        console.log(canMove);
        var zi = $(".video-volume-range-current", videobox);
        if (canMove) {
            volumeh = 1 - e.offsetY / $(this).height();
            console.log(volumeh);
            zi.css("height", volumeh * 100 + "%")
        } else {
            return;
        }
    });
    $(document).on("mouseup", function (e) {
        canMove = false;
    });
    var volumeh = 0;
    $(".video-tinytip-tiao", videobox).on("mousemove ", function (e) {
        var zi = $(".video-volume-range-current", videobox);
        var hh = $(".video-volume-range", videobox);
        if (canMove) {
            console.log(e);
            volumeh = 1 - (e.offsetY - 16) / hh.height();
            console.log(volumeh);
            if (volumeh <= 0) {
                $(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off");
            } else if (volumeh > 1) {
                volumeh = 1;
            } else {
                $(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on");
            }
            zi.css("height", volumeh * 100 + "%")
            meido.volume = volumeh;
        } else {
            return;
        }
    });
    $(".video-btn-volume", videobox).on("click", function () {
        if ($(this).find("i").hasClass("i-voice-on")) {
            meido.volume = false;
            volumeh = $(".video-volume-range-current", videobox).height() / $(".video-volume-range", videobox).height();
            console.log(volumeh);
            $(".video-volume-range-current", videobox).css("height", 0 + "%");
            $(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off");
        } else {
            meido.volume = true;
            $(".video-volume-range-current", videobox).css("height", volumeh * 100 + "%");
            $(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on");
        }
    })
    /*
     *  音量  结尾
     */
    /*
     *  全屏
     */
    $(".video-fullscreen", videobox).on("click", function () {
        if ($(this).find("i").hasClass("i-quanping")) {
            quanpin(meido);
        } else {
            console.log("退出全屏");
            exitquanping();
        }
    })
    /*
     *  全屏结尾
     */

    /*
     *  切换清晰度
     */
    $(".video-menu-item").on("click", function () {
        if ($(this).hasClass("video-active")) {
            return;
        }
        $(this).addClass("video-active").siblings().removeClass("video-active");
        $(".video-definition-button span").html($(this).html());
        var duration = meido.currentTime;
        meido.canplay = false;
        meido.pause();
        meido.src = datasrc + $(this).html() + ".mp4";
        meido.currentTime = duration;
    });


    vid.play();
}